<#assign menuId=2>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>创建设计订单-${Application.systemName!}</title>
		<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
		<link rel="stylesheet" href="../js/plugins/select2/select2.css">
		<!-- bootstrap 3.0.2 -->
		<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<!-- font Awesome -->
		<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<!-- Ionicons -->
		<link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
		<!-- bootstrap wysihtml5 - text editor -->
		<link href="../css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
		<!-- iCheck for checkboxes and radio inputs -->
		<link href="../css/iCheck/minimal/blue.css" rel="stylesheet" type="text/css" />
		
		  
		<!-- Theme style -->
		<link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../css/datetimepicker/bootstrap-datetimepicker.min.css"/>
  		
  		<link href="../css/myself.css" rel="stylesheet" type="text/css" />
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
		<style type="text/css">
			 .red{
		      		color: red;
		       }
			 .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
				    vertical-align: middle;
			 }
			 
	        .textarea1{
	            width: 95%;
	            margin: auto;
	            border:1px solid #000;
	        }
	        .select2-container--default .select2-selection--single {
			    border-radius: 0;
			    border: 1px solid #ccc;
			}
			.select2-container--default .select2-selection--single .select2-selection__rendered {
			    text-align: left;
			}
			.select2-container--default .select2-search--dropdown .select2-search__field{
			    border: 1px solid #ccc;
			}
			.ol_left{
	            width: 100%;
	            height: 30px;
	            line-height: 30px;
	            padding: 0;
	        }
	        .ol_left>li{
	            float: left;
	            margin-right: 5px;
	        }
	        .ol_left li, .ol_left{
	        	margin-bottom: 0;
	        }
	        ol li{
	        	list-style: none;
	        }
	        
		</style>
	</head>

	<body class="skin-blue">
		<!-- header logo: style can be found in header.less -->
		<#include "../header.html" />

		<div class="wrapper row-offcanvas row-offcanvas-left">
			<!-- Left side column. contains the logo and sidebar -->
			<#include "../menu.html" />


			<!-- Right side column. Contains the navbar and content of the page -->
			<aside class="right-side">
				<section class="content-header">
                    <h1>创建设计订单</h1>
                    <ol class="ol_left">
		                <li>当前位置：</li>
		                <li><a href="list?pageNo=1">设计订单</a></li>
		                <li>>创建设计订单</li>
		            </ol>
		            <hr class="no-margin" />
                </section>
				<!-- Content Header (Page header) -->
				<section class="content" style="overflow: ">
            	<div class="row">
            		<div class="col-md-12">
                        <div class="box" style="padding: 20px"> 
                            <div class="center clearfix">
                                <form method="post" id="form">
                                    <table class="table text-center table-bordered   custormView">
                                        <tr>
                                            <td class="col-md-1"><span class="red">*</span>客户名称</td>
                                            <td class="col-md-11" colspan="3">
								                <select id="customerId" name="customerId"   class="select2 form-control" style="width: 100%; padding: 6px 12px">
								                  
								                  <option selected="selected" value="">请选择</option>
								                  <#list customerList as customer>
								                  <option value="${customer.id}">${customer.fullname}</option>
								                  </#list>
								                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-1"><span class="red">*</span>设计截止时间</td>
                                            <td class="col-md-5">
	                                            <div  class="input-group date form_datetime col-md-8" >
								                    <input id="designEndDate" class="form-control" type="text" name="designEnddate" value="">
													<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
								                </div>
                                            </td>
                                            <td class="col-md-1">打样截止日期 </td>
                                            <td class="col-md-5">
	                                            <div class="input-group date form_datetime col-md-8" >
								                    <input id="proofingEndDate" class="form-control"  type="text" name="proofingEnddate" value="">
													<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
								                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-1"><span class="red">*</span>设计件数</td>
                                            <td class="col-md-11" colspan="3">
                                                <input type="text" class="form-control" name="designCount"></input>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-1">客户需求</td>
                                            <td class="col-md-11" colspan="3">
                                                <div class="form-group textarea no-margin">
		                                            <textarea class="form-control" rows="3" name="requirement" placeholder=""></textarea>
		                                        </div>
                                            </td>
                                        </tr>
                                    </table>
                                </form>
                                <div style="margin: 20px 0"> 
                                    <button class="btn btn-primary ">确定创建</button>
                                    <button class="btn btn-default " id="btncancel">&nbsp;&nbsp;&nbsp;&nbsp;取消&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                </div>
                            </div>
                        </div>
            		</div>
            	</div>
            </section>
			</aside>
			<!-- /.right-side -->
			
			
		</div>
		<!-- ./wrapper -->
		
		
		
		<!-- jQuery 2.0.2 -->
		<script src="../js/jquery.min.js"></script>
		
		<script src="../js/plugins/select2/select2.full.min.js"></script>
		<!-- Bootstrap -->
		<script src="../js/bootstrap.min.js" type="text/javascript"></script>
		<!-- AdminLTE App -->
		<script src="../js/AdminLTE/app.js" type="text/javascript"></script>
		<!-- Bootstrap WYSIHTML5 -->
		<script src="../js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
		<!-- iCheck -->
		<script src="../js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
		<!-- Page script -->
		
		<script src="../js/jquery.form.min.js"></script>
		
		<!--datepickes-->
		<script src="../js/plugins/datetimerpicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
		<script src="../js/plugins/datetimerpicker/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function() {
	
			$(".select2").select2();
			$('#designEndDate').datetimepicker({
				format: 'yyyy-mm-dd hh:00',
		    	language:  'zh-CN',  
	            weekStart: 1,  
	            todayBtn:  1,  
	            autoclose: 1,  
	            todayHighlight: 1,  
	            startView: 2,  
	            forceParse: 0,
	            showMeridian: 0,
	            minView: 1,
	            startDate: new Date()
		    }).on("changeDate",function(ev){
		    	var designEndDate = $('#designEndDate').val();
		    	$('#proofingEndDate').datetimepicker('setStartDate',designEndDate);
		    });
			$('#designEndDate').next().click(function(){
				$('#designEndDate').datetimepicker('show');
			});
		    $('#proofingEndDate').datetimepicker({
		    	format: 'yyyy-mm-dd hh:00',
		    	language:  'zh-CN',
	            weekStart: 1,
	            todayBtn:  1,
	            autoclose: 1,
	            todayHighlight: 1,
	            startView: 2,
	            forceParse: 0,
	            showMeridian: 0,
	            minView: 1,
	            startDate: new Date()
		    }).on("changeDate",function(ev){
		    	var proofingEndDate = $('#proofingEndDate').val();
		    	$('#designEndDate').datetimepicker('setEndDate',proofingEndDate);
		    });
		    $('#proofingEndDate').next().click(function(){
		    	$('#proofingEndDate').datetimepicker('show');
		    });
		    
		    
		  	$("#customerId").val(${customerId!});
		    $(".btn-primary").click(function(){ 
		   	  if(!checkCustomer()) return false;
		   	  if(!checkDate()) return false;
		   	  if(!checkCount()) return false;
      		  $("#form").ajaxSubmit({  
    	            type : "POST",  
    	            url : "add",   
    	            dataType : "json",  
    	            contentType : 'application/x-www-form-urlencoded; charset=UTF-8',  
    	            success : function(map) {  
    	            	if(map.head.respCode=="0000000"){
    	                	alert("保存成功");
    	                	window.location.href="list";
    	                }else{
    	                	alert(map.body);
    	                }
    	            },  
    	            error : function(map) {  
    	                alert("出现错误，请刷新页面");  
    	            }  
    	  
    	        }) 
      	  });
		
		    $('#btncancel').click(function(){
				confirm('是否取消创建设计订单?放弃后当前填写的资料将无法保存',function(isConfirm){
					if(isConfirm) history.back();
				});
			});

	  	});
		
		function checkCustomer(){
			if(!$('#customerId').val()){
				alert('请先选择客户');
				return false;
			}
			return true;
		}
		
		function checkDate(){
			var time=$('#designEndDate').val();
			if(!time){
				alert('请选择设计截止时间');
				return false;
			}
			var reg=/^\w{4}-\w{2}-\w{2} \w{1,2}:\w{2}$/;
			if(!reg.test(time)){
				alert('设计截止时间不符');
				return false;
			}
			return true;
		}
		
		function checkCount(){
			var count=$('[name=designCount]').val();
			if(!count){
				alert('请输入设计件数');
				return false;
			}
			if(isNaN(count)){
				alert('设计件数必须是数字');
				return false;
			}
			return true;
		}
		</script>

	</body>

</html>